<template>
	<view class="content">
		<!-- 背景 -->
		<view class="bg"></view>
		<!-- 审核状态 -->
		<view class="code_box u-flex">
			<image src="/static/icon/wait.png" class="audit" v-if="tab == 1"></image>
            <image src="/static/icon/yx.png" class="audit" v-if="tab == 2"></image>
			<view class="code_tit">
				<text v-if="type == 1">报备</text>
                <text v-if="type == 2">到访</text>
                <text v-if="type == 3">认购</text>
                <text v-if="type == 4">结佣</text>
                <text v-if="type == 7">认证人员</text>
                {{ tab == 1 ? '待审核' : '已审核' }}
			</view>
		</view>
		<!-- 详情 -->
		<view class="details_box" v-if="type != 7">
            <view class="u-flex u-rela">
            	<view class="left_tit">客户姓名</view>
            	<view class="details_tit">{{data.name}}</view>
                <view class="copy" @click="copy(data.name)">复制</view>
            </view>
			<view class="u-flex">
				<view class="left_tit ">客户性别</view>
				<view class="details_tit">{{data.gender == 1 ? '男' : '女'}}</view>
                <view class="copy" @click="copy(data.gender == 1 ? '男' : '女')">复制</view>
			</view>
			<view class="u-flex u-rela">
				<view class="left_tit ">客户电话</view>
                <view class="details_tit" v-if="(role == 1 && data.phone) || (role == 2 && data.phone) || (role == 6 && data.phone)">
                    {{ data.phone.substring(0, 3)+"****"+data.phone.substring(7) }}
                </view>
                <view class="details_tit" v-else>{{ data.phone }}</view>
                <view class="copy" @click="copy(data.phone)">复制</view>
			</view>
			<view class="u-flex">
				<view class="left_tit ">身份证号</view>
				<view class="details_tit">{{data.id_number || '无'}}</view>
                <view class="copy" @click="copy(data.id_number)">复制</view>
			</view>
			<view class="u-flex">
				<view class="left_tit ">楼盘名称</view>
				<view class="details_tit">{{data.pro_name}}</view>
                <view class="copy" @click="copy(data.pro_name)">复制</view>
			</view>
			<view class="u-flex u-rela">
				<view class="left_tit ">报备人员</view>
				<view class="details_tit">{{data.broker_name}}</view>
                <view class="copy" @click="copy(data.broker_name)">复制</view>
			</view>
			<view class="u-flex u-rela">
				<view class="left_tit ">联系电话</view>
				<view class="details_tit">{{data.broker_phone}}</view>
                <view class="u-flex">
                    <view class="bh_btn" @click="doCall(data.broker_phone)">一键拨号</view>
                    <view class="copy" @click="copy(data.broker_phone)">复制</view>
                </view>
			</view>
            
            <view class="u-flex u-rela">
            	<view class="left_tit ">驻场人员</view>
            	<view class="details_tit">{{data.resident_name || '无'}}</view>
                <view class="copy" @click="copy(data.resident_name)">复制</view>
            </view>
            <view class="u-flex u-rela">
            	<view class="left_tit ">驻场电话</view>
            	<view class="details_tit">{{data.resident_phone || '无'}}</view>
                <view class="u-flex">
                    <view class="bh_btn" @click="doCall(data.resident_phone)">一键拨号</view>
                    <view class="copy" @click="copy(data.resident_phone)">复制</view>
                </view>
            </view>
            
			<view class="u-flex">
				<view class="left_tit ">报备时间</view>
				<view class="details_tit">{{data.report_time}}</view>
                <view class="copy" @click="copy(data.report_time)">复制</view>
			</view>
			<view class="u-flex" v-if="data.stores">
				<view class="left_tit ">所属门店</view>
				<view class="details_tit">{{data.stores}}</view>
                <view class="copy" @click="copy(data.stores)">复制</view>
			</view>
			<view class="u-flex" v-if="data.institution">
				<view class="left_tit ">所属公司</view>
				<view class="details_tit">{{data.institution}}</view>
                <view class="copy" @click="copy(data.institution)">复制</view>
			</view>
			<view class="u-flex" v-if="data.visit_time">
				<view class="left_tit ">到访时间</view>
				<view class="details_tit">{{data.visit_time}}</view>
                <view class="copy" @click="copy(data.visit_time)">复制</view>
			</view>
			<view class="u-flex" v-if="data.buy_time">
				<view class="left_tit ">认购时间</view>
				<view class="details_tit">{{data.buy_time}}</view>
                <view class="copy" @click="copy(data.buy_time)">复制</view>
			</view>
			<view class="remarks_box">
				<view class="u-flex u-row-between u-col-center u-p-b-20">
                    <view class="remarks_tit">备注</view>
                    <view class="copy" v-if="data.remark || data.buy_remark" 
                        @click="copy(data.buy_remark ? data.buy_remark : data.remark)">复制</view>
                    <view class="copy" v-else @click="copy('无')">复制</view>
                </view>
				<view class="remarks_con" v-if="data.remark || data.buy_remark">
                    {{ data.buy_remark ? data.buy_remark : data.remark}}
                </view>
                <view class="remarks_con" v-else>无</view>
			</view>
            <template v-if="data.annex_img && data.annex_img.length > 0">
                <view class="remarks_tit2">成交附件</view>
                <view class="fj_box">
                	<image v-for="(item, index) in data.annex_img" :key="index" :src="item.image" 
                        class="cjfj" @click="doPreview(item.image)"></image>
                </view>
            </template>
            
            <template v-if="data.visit_img && data.visit_img.length > 0">
                <view class="remarks_tit2">到访单</view>
                <view class="fj_box">
                	<image v-for="(item, index) in data.visit_img" :key="index" :src="item.image" 
                        class="cjfj" @click="doPreview(item.image)"></image>
                </view>
            </template>
            
            <template v-if="data.group_img && data.group_img.length > 0">
                <view class="remarks_tit2">三方合影</view>
                <view class="fj_box">
                	<image v-for="(item, index) in data.group_img" :key="index" :src="item.image" 
                        class="cjfj" @click="doPreview(item.image)"></image>
                </view>
            </template>
            
            <template v-if="data.buy_img && data.buy_img.length > 0">
                <view class="remarks_tit2">认购单</view>
                <view class="fj_box">
                	<image v-for="(item, index) in data.buy_img" :key="index" :src="item.image" 
                        class="cjfj" @click="doPreview(item.image)"></image>
                </view>
            </template>
		</view>
		<!-- 认证人员审核 -->
		<view class="details_box" v-if="type == 7">
			<view class="u-flex">
				<view class="left_tit ">姓名</view>
				<view class="details_tit">{{data.user_name}}</view>
			</view>
			<view class="u-flex">
				<view class="left_tit ">手机号</view>
				<view class="details_tit">{{data.phone}}</view>
			</view>
			<view class="u-flex" v-if="data.id_number">
				<view class="left_tit ">身份证号</view>
				<view class="details_tit">{{data.id_number}}</view>
			</view>
			<view class="u-flex" v-if="data.code">
				<view class="left_tit ">机构邀请码</view>
				<view class="details_tit">{{data.code}}</view>
			</view>
			<view class="u-flex">
				<view class="left_tit ">门店</view>
				<view class="details_tit">{{data.stores}}</view>
			</view>
			
			<view class="card_box" v-if="data.front_img || data.back_img">
				<view class="card_tit">身份证照片</view>
				<view class="card_ftit">人像面</view>
				<view class="fj_box u-p-b-15">
					<image :src="data.front_img" class="fj" @click="doPreview(data.front_img)"></image>
				</view>
				<view class="card_ftit">国徽面</view>
				<view class="fj_box">
					<image :src="data.back_img" class="fj" @click="doPreview(data.back_img)"></image>
				</view>
			</view>
		</view>
        
        <!-- user_type 1运维经理 2运维总监 3项目驻场 4项目总监 5经纪人 6店长 7管理员 8报备专员 9策划 -->
        <!-- report == 2 没有审核按钮(只有 项目驻场 要判断) -->
        <!-- 管理员审核 -->
        <!-- user_status 1启用 2禁用 work_status 1在职 2离职 3申请离职 -->
		<template v-if="tab == 1 && type == 4 && role == 7">
            <view class="u-flex u-row-between" style="width: 100%;">
                <view class="btn1" @click="doExamine(2, 6)">退户</view>
            	<view class="btn3" @click="doExamine(2)">确认</view>
            </view>
        </template>
        
        <template v-if="tab == 1 && type == 7 && (role == 1 || role == 2 || role == 6 || role == 7)">
            <view class="u-flex u-row-between" style="width: 100%;">
            	<view class="btn1" @click="show = true">驳回</view>
            	<view class="btn2" @click="doExamine(2)">通过</view>
            </view>
        </template>
        
        <!-- 个人中心 项目驻场审核，其他角色查看 -->
        <template v-if="tab == 1 && role == 3 && (type == 1 || type == 2) && data.report != 2">
            <view class="u-flex u-row-between" style="width: 100%;" v-if="data.examine == 1 || data.examine == 2 || data.enter_examine == 1">
            	<view class="btn1" @click="show = true">驳回</view>
            	<view class="btn2" @click="doExamine(2)">通过</view>
            </view>
        </template>
        <!-- 个人中心 报备专员审核，其他角色查看 -->
        <template v-if="tab == 1 && role == 8 && (type == 1 || type == 2) && !data.resident_name">
            <view class="u-flex u-row-between" style="width: 100%;" v-if="data.examine == 1 || data.examine == 2 || data.enter_examine == 1">
            	<view class="btn1" @click="show = true">驳回</view>
            	<view class="btn2" @click="doExamine(2)">通过</view>
            </view>
        </template>
        <!-- 个人中心 运维经理审核，其他角色查看 -->
        <template v-if="tab == 1 && role == 1 && (type == 3 || type == 4)">
            <view class="u-flex u-row-between" style="width: 100%;" v-if="type == 3 && (data.examine == 1 || data.enter_examine == 1)">
            	<view class="btn1" @click="show = true">驳回</view>
            	<view class="btn2" @click="doExamine(2)">通过</view>
            </view>
            <view class="u-flex u-row-between" style="width: 100%;" v-if="type == 4">
                <view class="btn1" @click="doExamine(2, 6)">退户</view>
            	<view class="btn3" @click="doExamine(2)">确认</view>
            </view>
        </template>
        
        <!-- 驳回原因弹窗 -->
        <u-mask :show="show" mode="center" border-radius="14">
            <view class="popup">
                <view class="win-box2">
                    <view class="pop-cen">
                        <view class="pop-tit">驳回原因</view>
                        <textarea v-model="content" placeholder="请输入驳回原因"></textarea>
                    </view>
                    <view class="pop-btn">
                        <view @click="show = false">取消</view>
                        <view @click="doExamine(3)">确认</view>
                    </view>
                </view>
            </view>
        </u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                noClick:true,//连点
				show: false,
                id: '',
                data: {},
                content: '',
                type: '',
                tab: '', //1待审核 2已审核
                role: '',
			}
		},
        onLoad(option) {
            this.id = option.id
            this.type = option.type
            this.tab = option.tab
            // 从个人中心 项目报备列表进入
            if (option.role) {
                this.role = option.role
            }
            this.getData()
        },
		methods: {
			doCall(tel) {
				if (tel) {
					uni.makePhoneCall({
					    phoneNumber: tel
					});
				} else {
					this.$toast('暂无联系电话')
				}
			},
			
            //复制
            copy(order_no) {
                uni.setClipboardData({
                    data: order_no,
                    success: function() {
                        console.log('success');
                    }
                });
            },
            
            // 审核
            doExamine(num, type) {
                var tt = ''
                if (type) {
                    tt = type
                } else {
                    tt = this.type == 4 ? 5 : this.type
                }
                this.$ajax('reporting_examine', {
                    user_token: this.$getSync('userToken'),
                    id: this.id,//报备id
                    status: tt,//1报备 2到访 3认购 4认购信息 5结佣 6退户 7认证
                    examine: num,//2通过 3驳回
                    reason: this.content,//驳回原因
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.show = false
                        this.$toast('提交成功');
                        setTimeout(() => {
                            this.content = ''
                            this.$backT()
                        }, 500)
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            // 获取详情
			getData() {
                var url = ''
                if (this.type == 7) {
                    url = 'users_detail'
                } else {
                    url = 'reporting_detail'
                }
			    this.$ajax(url, {
			        user_token: this.$getSync('userToken'),
			        id: this.id,//报备id
			    }).then(ret => {
			        if (ret.success == 1000) {
			            this.data = ret.detail
			        } else {
			            this.$toast(ret.msg);
			        }
			    });
			},
            
            // 预览图片
            doPreview(item) {
            	var arr = [];
                arr.push(item)
            	uni.previewImage({
            	    urls: arr,
            	    longPressActions: {
            	        success: function(data) {
            	        },
            	        fail: function(err) {
                            console.log(err)
            	        }
            	    }
            	});
            },
		}
	}
</script>
<style>
	page{background-color: #f8f9fb!important;}
</style>
<style scoped>
    .copy {
    	width: 90rpx;
    	height: 40rpx;
    	border-radius: 30rpx;
    	border: 2rpx solid #9e9e9e;
    	color: #9e9e9e;
    	font-size: 22rpx;
        text-align: center;
        line-height: 40rpx;
    }
    
    
    
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	padding: 30rpx 20rpx 100rpx;
}
.bg{
	width: 100%;
	height: 600rpx;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background: linear-gradient(to bottom,#3b99f7,#f8f9fb);
}
.code_box{
	width: 100%;
	margin-bottom: 36rpx;
}
.audit{
	width: 70rpx;
	height: 70rpx;
	margin: 0 26rpx;
}
.code_tit{
	font-size: 42rpx;
	/* line-height: 44rpx; */
	color: #ffffff;
}
.details_box{
	width: 100%;
	border-radius: 16rpx;
	box-shadow: 0 0 10rpx #e3e3e3;
	background-color: #fff;
	padding: 40rpx 36rpx 50rpx;
	margin-bottom: 64rpx;
}
.name_tit{
	font-size: 30rpx;
	/* line-height: 32rpx; */
	color: #000000;
	font-weight: bold;
	margin-bottom: 26rpx;
}
.details_tit{
	font-size: 28rpx;
	color: #000000;
    padding-bottom: 20rpx;
    flex: 1;
    word-break: break-all;
    white-space: pre-line;
}
.left_tit{
	width: 158rpx;
    padding-bottom: 20rpx;
}
.bh_btn{
	width: 120rpx;
	height: 50rpx;
	font-size: 24rpx;
	line-height: 50rpx;
	color: #803906;
	text-align: center;
	border-radius: 10rpx;
	background-color: #ffecd2;
	/* position: absolute;
	right: 0; */
    margin-right: 10rpx;
}
.remarks_box{
	width: 100%;
	padding: 30rpx 0 60rpx;
	border-top: 2rpx solid #f0f0f0;
	/* border-bottom: 2rpx solid #f0f0f0; */
	margin: 10rpx 0 0;
}
.remarks_tit{
	font-size: 28rpx;
	/* line-height: 30rpx; */
	color: #000000;
	font-weight: bold;
	/* margin-bottom: 20rpx; */
}
.remarks_tit2{
    font-size: 28rpx;
    /* line-height: 30rpx; */
    color: #000000;
    font-weight: bold;
    margin-bottom: 20rpx;
    padding-top: 30rpx;
    border-top: 2rpx solid #f0f0f0;
}
.remarks_con{
	font-size: 24rpx;
	/* line-height: 32rpx; */
	color: #666666;
}
.fj_box{
	/* width: 168rpx;
	height: 168rpx;
	border-radius: 12rpx;
	overflow: hidden; */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}
.cjfj{
    width: 168rpx;
    height: 168rpx;
    border-radius: 12rpx;
    margin-right: 15rpx;
    margin-bottom: 15rpx;
}
.fj{
	width: 265rpx;
	height: 168rpx;
	border-radius: 12rpx;
    margin-right: 15rpx;
    margin-bottom: 15rpx;
}
.btn1{
	width: 332rpx;
	height: 92rpx;
	font-size: 34rpx;
	line-height: 92rpx;
	color: #000;
	text-align: center;
	border-radius: 46rpx;
	background-color: #f0f0f0;
}
.btn2{
	width: 332rpx;
	height: 92rpx;
	font-size: 34rpx;
	line-height: 92rpx;
	color: #fff;
	text-align: center;
	border-radius: 46rpx;
	background-color: #00a1e9;
}
.btn3{
    width: 100%;
    height: 92rpx;
    font-size: 34rpx;
    line-height: 92rpx;
    color: #fff;
    text-align: center;
    border-radius: 46rpx;
    background-color: #00a1e9;
}
.card_box{
	width: 100%;
	padding-top: 30rpx;
	margin-top: 10rpx;
	border-top:2rpx solid #f0f0f0 ;
}
.card_tit{
	font-size: 28rpx;
    font-weight: bold;
	/* line-height: 30rpx; */
	color: #000;
	margin-bottom: 10rpx;
}
.card_ftit{
	font-size: 24rpx;
	/* line-height: 26rpx; */
	color: #acacac;
	margin-bottom: 20rpx;
}


    .popup {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .win-box2 {
        width: 80vw;
        background-color: #fff;
        border-radius: 20upx;
    }
    .pop-cen{
        padding: 50rpx 20rpx;
    }
    .pop-tit{
        font-size: 36rpx;
        font-weight: bold;
        text-align: center;
        padding-bottom: 25rpx;
    }
    .pop-time{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15rpx;
    }
    .pop-time-r{
        width: 55vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rpx;
        border-radius: 10rpx;
        background-color: #f5f5f5;
    }
    .time-icon{
        width: 32rpx;
        height: 34rpx;
    }
    textarea{
        width: 100%;
        padding: 15rpx;
        border-radius: 10rpx;
        background-color: #f5f5f5;
        margin-top: 15rpx;
    }
    .pop-btn{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 2rpx solid #e6e6e6;
    }
    .pop-btn>view{
        width: calc(80vw / 2);
        text-align: center;
        padding: 35rpx 0;
        font-size: 30rpx;
        color: #00a1e9;
    }
    .pop-btn>view:first-child{
        border-right: 2rpx solid #e6e6e6;
    }

</style>
